!{include file='common/iheader.htm'}
<style>
	#i_wrap{position:relative;}
	#ungroup_item{width:20%;position:absolute;left:0;top:40px;z-index:10;}
	#ungroup_item dt{font-weight:bold;line-height:30px;padding-left:6px;}
	#ungroup_item dd{border:1px solid #AED0EA;padding:5px 10px;margin:2px 5px;border-radius:4px;color:#2779AA;}
	#ungroup_item dd:hover{border-color:#74B2B2;background:#D7EBF9;}
	.state-hover{background:#D7EBF9!important;}
	.state-active{background:#F9DDDD!important;}
	.drop_contner{display:none;}

	#tab_content{width:77%;position:absolute;right:0;top:40px;}
</style>
<div id="i_nav">
	<h3 class="page_title">表单排版 -- !{$forms.title}</h3>
	<a class="button" href="/manager.php?app=attrs">属性组管理</a>
	<a class="button" href="/manager.php?app=relation">关联属性管理</a>
	<a class="button" href="/manager.php?app=forms">表单管理</a>
</div>
<dl id="ungroup_item">
	<dt>未分组属性</dt>
	!{foreach from=$ungroups item=attr key=attr_id}
	<dd id="item_!{$attr_id}" name="!{$attr_id}" !{if $attr.attr_id}attr_id="!{$attr.attr_id}"!{/if} !{if $attr.forms_id}forms_id="!{$attr.forms_id}"!{/if}>
		!{$attr.name} 
		<!--  
		[!{$attr.type}!{if $attr.trait}_!{$attr.trait}!{/if}]
		-->
	</dd>
	!{foreachelse}
	<dd>
		<strong>暂无未分组属性...</strong>
	</dd>
	!{/foreach}
</dl>
<div id="tab_content">
	!{$html}
</div>
<script type="text/javascript">
	$(function(){
		$('#ungroup_item dd').draggable({
			revert: "invalid",
			cursor: "move",
			opacity : 0.8,
			start : function(event, ui){
				$('.drop_contner').slideDown();
			},
			stop : function(){
				$('.drop_contner').slideUp();
			}
		});

		$(".tab_content").droppable({
			accept: "dd",
			activeClass: "state-hover",
			hoverClass: "state-active",
			drop: function(event, ui){
				var dd = ui.draggable[0];
				$(this).append($(dd).html());
				$(dd).hide();
			}
		});
	});
</script>
!{include file='common/ifooter.htm'}